<template>
	<view class="u-rela">
		<view class="module-content">
			<view class="userinfo u-f-item u-f-jsb u-p-30" v-if="userinfo.avatar">
				<view class="u-f-item">
					<u-avatar size="120" :src="userinfo.avatar"></u-avatar>
					<view class="u-f1 u-p-l-20 u-f-item" v-if="isLogin">
						<view class="u-font-36">{{userinfo.nickname}}</view>
						<view v-if="userinfo" class="u-rate" style="position: relative;width: 80rpx;height: 42rpx;">
							<image src="/static/img/vip.png" style="width: 80rpx;height: 42rpx;"></image>
							<view
								style="left: 0;right: 6rpx;top: 12rpx;bottom: 0;position: absolute;color: #F75647;font-size: 20rpx;text-align: right;">
								{{userinfo.grade_name}}
							</view>
						</view>
					</view>
					<view class="u-f1 u-p-l-20 u-f-item" v-if="!isLogin" @click="toLogin">
						<view class="u-font-36">去登录</view>
					</view>
				</view>

			</view>
			<view class="module-ti" v-for="(item,index) in dataList" :key="index" v-if="index==curIndex">
				<view class="ti-title u-m-b-20">{{index+1}}，{{typeAttr[item.question_type]}}</view>
				<view class="ti-title u-font-28 u-m-b-40" style="color: #256CB4;">{{item.question}}</view>
				<view class="ti-content u-p-b-30">
					<view class="item" v-for="(item1,index1) in item.attr" :key="index1"
						@click="toSelect(item,item1,index,index1)">
						<template v-if="item.question_type==3">
							
							<image src="../../static/img/4.png" v-if="item1.check" class="item-ic ic-correct" />
							<image src="../../static/img/3.png" v-else class="item-ic ic-correct" />
						</template>
						<template v-else>
							
							<image src="../../static/img/2.png" v-if="item1.check" class="item-ic ic-correct" />
							<image src="../../static/img/1.png" v-else class="item-ic ic-correct" />
						</template>
						{{item1.value}}、{{item1.key}}
						<!-- <u-icon v-if="item1.check" class="item-ic ic-correct" name="checkbox-mark"></u-icon> -->

					</view>
				</view>
				<view class="u-f-item">

					<view class="ti-btn" v-if="index!=0" @click="toPrev">上一题</view>
					<view class="ti-btn" v-if="(index+1)==dataList.length" @click="toFinish">提交答案</view>
					<view class="ti-btn" v-if="(index+1)<dataList.length" @click="toNext">下一题</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view style="padding: 60rpx;text-align: center;">
				<view style="margin-bottom:32rpx">答题完成</view>
				<view style="color: #256CB4;margin-bottom:32rpx"><span class="u-font-40">{{score}}</span> 分</view>
				<view class="u-f-item">

					<view class="ti-btn" @click="toBack">确定</view>

				</view>
			</view>
		</u-popup>
		<!-- #ifdef MP-WEIXIN -->
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				score: 0,
				curIndex: 0,
				// 单选,2=判断,3=多选
				typeAttr: ['', '单选题', '判断题', '多选题'],
				answer_time: 0,
				setTime: null,
				isLogin: false,
				userinfo: {},
				dataList: []
			}
		},
		onLoad() {

		},
		computed: {
			indexImage() {
				return this.$store.state.config.index_image;
			}
		},
		onShow() {
			this.curIndex = 0
			this.dataList = []
			this.userinfo = {}
			if (this.$db.get('userToken')) {
				this.getUserInfo()
			} else {
				this.isLogin = false;
			}

			//#ifdef MP-WEIXIN
			wx.requirePrivacyAuthorize({
				success: () => {
					console.log('点击同意');
				},
				fail: () => {
					console.log('点击拒绝');

				},
				complete: () => {
					console.log('用户已点击');
				}
			})
			//#endif
		},
		methods: {
			toBack() {
				this.show = false
				uni.navigateBack()
			},
			toNext() {

				let isGo = false
				this.dataList[this.curIndex].attr.some(item => {

					if (item.check) {
						isGo = true
					}
				})
				if (!isGo) {
					this.$common.errorToShow('请选择答案！')
					return
				}
				this.curIndex += 1
			},
			toPrev() {
				this.curIndex -= 1
			},
			toSelect(item, item1, index, index1) {
				if (item.question_type == 1) {

					item.attr.some(u => {
						u.check = false
					})
					item.attr[index1].check = true
				}
				if (item.question_type == 2) {
					item.attr.some(u => {
						u.check = false
					})
					item.attr[index1].check = true
				}
				if (item.question_type == 3) {
					item.attr[index1].check = !item.attr[index1].check
				}
			},
			toFinish() {
				clearInterval(this.setTime);
				let post = {
					answer_time: this.answer_time,
					user_answer: []
				}
				this.dataList.some(item => {
					let i = {
						"question_id": item.id, //问题ID
						"question_type": item.question_type, //类型:1=单选,2=判断,3=多选
						"answer": item.answer, //问题答案
						"options": "", //用户选择的答案（大小写与问题答案相同，多选使用英文逗号分隔，例：A,B）
						"score": item.score //题目分
					}
					let atr = []
					item.attr.some(an => {
						if (an.check) {
							atr.push(an.value)
						}
					})
					i.options = String(atr)
					post.user_answer.push(i)
				})


				this.$api.simulationSubmit(post, res => {
					if (res.code == 1) {
						this.score=res.data
						this.show=true
						// this.$common.errorToShow('提交成功', () => {
						// 	uni.navigateBack()
						// })
					} else {

						this.$common.errorToShow(res.msg)
					}
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			getUserInfo() {

				this.$api.userInfo({}, res => {
					if (res.code == 1) {
						this.isLogin = true;
						this.userinfo = res.data;
						this.getList()
					}
				})
			},
			getList() {
				this.$api.simulation({}, res => {
					if (res.code == 1) {
						this.dataList = res.data;
						this.dataList.some(item => {
							let attr = []
							if (item.option_a) {
								let cal = {
									check: false,
									value: 'A',
									key: item.option_a,
									name: 'option_a'
								}
								attr.push(cal)
							}
							if (item.option_b) {
								let cal = {
									check: false,
									value: 'B',
									key: item.option_b,
									name: 'option_b'
								}
								attr.push(cal)
							}

							if (item.option_c) {
								let cal = {
									check: false,
									value: 'C',
									key: item.option_c,
									name: 'option_c'
								}
								attr.push(cal)
							}
							if (item.option_d) {
								let cal = {
									check: false,
									value: 'D',
									key: item.option_d,
									name: 'option_d'
								}
								attr.push(cal)
							}
							if (item.option_e) {
								let cal = {
									check: false,
									value: 'E',
									key: item.option_e,
									name: 'option_e'
								}
								attr.push(cal)
							}
							if (item.option_f) {
								let cal = {
									check: false,
									value: 'F',
									key: item.option_f,
									name: 'option_f'
								}
								attr.push(cal)
							}
							this.$set(item, 'attr', attr)
						})
						// this.setTime = setInterval(() => {
						// 	this.answer_time++;
						// }, 1000);
					}
				})
			},
			toList(index) {
				if (!this.$db.get('userToken')) {
					this.$common.errorToShow('请先登录', () => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/list?index=' + index
					})
				}
			},
			toInfo(id) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + id
				})
			}
		}
	}
</script>

<style>
	.module-content {
		padding: 30rpx;
	}

	.userinfo {
		box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
		background: #fff;
		border-radius: 20rpx;
	}

	.meun-list>view:nth-of-type(1) {
		width: 218rpx;
		height: 124rpx;
		background: rgba(233, 233, 252, 0.5);
		box-shadow: 0px 1px 3px #CDCDF2;
		border-radius: 10px;
	}

	.hd {
		background: rgba(210, 210, 255, 0.8);
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.meun-list>view:nth-of-type(2) {
		width: 218rpx;
		height: 124rpx;
		background: rgba(230, 238, 255, 0.5);
		box-shadow: 0px 1px 3px #B2C8F8;
		border-radius: 10px;
		margin-left: 24rpx;
	}

	.meun-list>view:nth-of-type(3) {
		width: 218rpx;
		height: 124rpx;
		background: #FDE8E8;
		box-shadow: 0px 1px 3px #FFC4C4;
		border-radius: 10px;
		margin-left: 24rpx;
	}

	.zs {
		background: #FFD7D7;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.hd-item {
		background: #FFFFFF;
		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.hd-item>image {
		width: 100%;
		height: 354rpx;
	}
</style>

<style lang="scss">
	.module-ti {
		width: 100%;
		min-height: 100vh;
		position: relative;
		z-index: 1;
		padding: 60rpx 52rpx;
		background: linear-gradient(179.97deg, rgba(255, 255, 255, 0.5) 51.17%, rgba(255, 255, 255, 0.2) 76.58%);

	}

	.ti-step {
		color: #256CB4;
		font-size: 32rpx;
		font-weight: bold;
		border: 2px solid #256CB4;
		border-radius: 10px;
		width: 158px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 0 auto;
	}

	
	.ti-content {
		.item {
	
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid #256CB4;
			border-radius: 10px;
			color: #256CB4;
			font-size: 28rpx;
			padding: 26rpx;
			padding-left: 86rpx;
			line-height: 40rpx;
			margin: 0 0 30rpx;
			position: relative;
	
			&.right {
				background: #499DFF;
				color: #fff;
			}
	
			&.wrong {
				background: #FD4163;
				color: #fff;
				border: 1px solid #FD4163;
			}
		}
	
		.item-ic {
			position: absolute;
			left: 22rpx;
			top: 50%;
			width: 48rpx;
			height:48rpx;
			transform: translateY(-50%);
		}
	}

	.ti-btn {
		background: #499DFF;
		border: 1px solid #256CB4;
		border-radius: 50rpx;
		width: 140px;
		height: 36px;
		margin: 0 auto;
		text-align: center;
		line-height: 34px;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
</style>